<template>
  <div class="item-img">
    <canvas :id="'myCanvas' + myIndex" width="660" height="660">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  name: "DrawEdge",
  props: {
    src: {
      type: String,
      default: ""
    },
    result: {
      type: Array,
      default: []
    },
    lineWidth: {
      type: Number,
      default: 2
    },
    lineColor: {
      type: String,
      default: ""
    },
    showAll: {
      type: Boolean,
      default: true
    },
    indexNumber: {
      type: Array,
      default: []
    },
    myIndex: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    this.draw()
  },
  watch: {
    myIndex:{
      immediate: true,
      handler() {
          this.$nextTick(() => {
            this.draw()
        });
      }
    },
    showAll: {
      immediate: true,
      handler() {
          this.$nextTick(() => {
            this.draw()
        });
      }
    },
    indexNumber: {
      immediate: true,
      handler() {
          this.$nextTick(() => {
            this.draw()
        });
      }
    },
    result: {
      immediate: true,
      handler(val) {
          this.$nextTick(() => {
            this.draw()
        });
      }
    }
  },
  methods: {
    draw() {
      this.imgURL = this.src;
      this.queryCanvasInfo();
    },
    //获取canvasdom节点
    queryCanvasInfo() {
      this.c = document.querySelector("#myCanvas" + this.myIndex)
      this.ctx = this.c.getContext("2d")
      this.img = new Image();
      this.img.src = this.imgURL;
      this.createCanvasImg();
    },
    //创建图片画布
    createCanvasImg() {
      let img = this.img;
      img.src = this.imgURL; //更换图片
      img.onload = () => {
        //图片加载时
        this.ctx.clearRect(0, 0, this.c.width, this.c.height); //清空这个范围的画布
        let a = img.width / img.height; //计算原始图片的宽高比例
        // console.log(img.width, img.height, 999);
        if (img.width > img.height) {
          //当图片宽度大于高度则写死宽度按高度调整比例
          this.maxW = this.c.width; //最大宽度要等于画布的宽度
          this.maxH = this.maxW / a;
        } else {
          //相反
          (this.maxH = this.c.height), (this.maxW = this.maxH * a);
        }
         this.times = this.img.width / this.maxW; //计算原图与canvas的比例
        this.canvasInfo(); //重新绘制图片
      };
    },
    //绘制图片
    canvasInfo() {
      let w = this.maxW, //计算缩放的宽度
        h = this.maxH; //计算缩放的高度
      this.ctx.drawImage(
        this.img, //图片实例
        0,
        0, //x轴y轴的边距
        w,
        h //图片的宽高
      );
      this.canvasRect(this.result);
    },
    //标注框绘制
    canvasRect(list) {
      list.forEach((item) => {
        if (!item) return;
        if (this.showAll === false && this.indexNumber.indexOf(item.id) == -1) return;
        let ary = item['bbox'],
        x = Number(ary[0]) / this.times,
        y = Number(ary[1]) / this.times,
        w = Number(ary[2]) / this.times,
        h = Number(ary[3])/ this.times;
        this.ctx.font = "normal bold 17px microsoft" //字体设置
        this.ctx.lineWidth = this.lineWidth; //框的粗细
        let color = null
        switch(item["category_id"]){
          case 0: 
            color = "rgba(255, 0, 0, 1)"
            break;
          case 1: 
            color = "rgba(0, 255, 0, 1)"
            break;
          case 2: 
            color = "rgba(0, 0, 255, 1)"
            break;
          case 3: 
            color = "rgba(255, 255, 0, 1)"
            break;
          default:
            break;
        }
        if (this.lineColor) color = this.lineColor 
        this.ctx.fillStyle = color; //字体颜色
        this.ctx.strokeStyle = color; //框的颜色
        this.ctx.strokeRect(x, y, w, h); //开始绘制
        this.ctx.fillText(item["category"] + " " + item["score"].toFixed(2), x, y - 2);
      });
    },
  },
};
</script>
<style scoped>
</style>

